<template>
  <div class="cart-tool">
    <check-btn
      :isChecked="isSelectAll"
      @click.native="checkAllClick"
    ></check-btn>
    <span>全选</span>
    <span class="total">合计：{{ totalProce }}</span>
    <span class="settlement">去结算：{{ cartLength }}</span>
  </div>
</template>

<script>
import CheckBtn from "@/components/content/checkBtn/CheckBtn";
export default {
  name: "ShopcartTool",
  components: {
    CheckBtn,
  },
  computed: {
    // 一、计算购物车商品总价
    totalProce() {
      return (
        this.$store.state.cartList
          // 1.先使用filter()筛选出符合条件(item.checked==true)的项目，返回新数组
          .filter((item) => {
            return item.checked;
          })
          // 2.通过reduce()累计求和(价格*数量)
          .reduce((prev, item) => {
            return prev + item.lowNowPrice * item.count;
          }, 0)
          .toFixed(2) // 后面2个小数点
      );
    },
    // 二、计算购物车商品个数
    cartLength() {
      // 商品checked为true代表选中
      // 通过filter()筛选出所有checked为true的项目返回数组
      return this.$store.state.cartList.filter((item) => {
        return item.checked;
      }).length; // 加个.length获取长度
    },
    // 三、全选按钮是否选中
    isSelectAll() {
      // 通过find()遍历cartList，判断只要有一个按钮没有选中，则停止查找返回true，将返回值取反
      var cartList = this.$store.state.cartList;

      // 购物车为空的情况下，让全选按钮不显示
      if (!cartList.length) return false;

      var some = cartList.some((item) => {
        return item.checked == false;
      });
      return !some;
    },
  },
  methods: {
    // 点击全选按钮
    checkAllClick() {
      // 上面计算属性里面有属性isSelectAll来判断全选按钮是否选中（小按钮是否都选中）
      // 【1】如果点击的时候，全选按钮是选中的，说明小按钮都是选中，让小按钮都为false就可以了
      if (this.isSelectAll) {
        // 通过循环让小按钮都为false
        this.$store.state.cartList.forEach((item) => {
          item.checked = false;
        });
      }
      // 【2】如果点击的时候，全选按钮不是选中的，说明有小按钮未选中，让小按钮都为true就可以了
      else {
        this.$store.state.cartList.forEach((item) => {
          // 通过循环让小按钮都为true
          item.checked = true;
        });
      }
    },
  },
};
</script>

<style scoped  lang="less" >
.cart-tool {
  position: fixed;
  bottom: 60px;
  left: 0;
  right: 0;
  z-index: 99;
  height: 38px;
  background-color: #ddd;
  display: flex;
  align-items: center;
  .total {
    margin-left: auto;
    padding: 0 10px;
  }
  .settlement {
    background-color: orangered;
    color: #fff;
    padding: 0 10px;
    line-height: 38px;
    text-align: center;
  }
}
</style>